<!-- Mobile Menu Open Button (only visible on mobile when closed) -->
<!--@if (isMobile() && !showMobileMenuOverlay()) {-->
<!--  <button-->
<!--    class="mobile-menu-open"-->
<!--    (click)="toggleMobileNav()"-->
<!--    [attr.aria-label]="'Open menu'"-->
<!--  >-->
<!--    <svg-->
<!--      width="24"-->
<!--      height="24"-->
<!--      viewBox="0 0 24 24"-->
<!--      fill="none"-->
<!--      stroke="currentColor"-->
<!--      stroke-width="2"-->
<!--    >-->
<!--      <path d="M3 12h18M3 6h18M3 18h18" />-->
<!--    </svg>-->
<!--  </button>-->
<!--}-->

<!-- Overlay for mobile (backdrop) -->
@if (isMobile() && showMobileMenuOverlay()) {
  <div
    class="nav-backdrop-mobile"
    (click)="toggleMobileNav()"
    [@mobileBackdrop]
  ></div>
}

@if (!isMobile() || showMobileMenuOverlay()) {
  <!-- Main Navigation Sidebar -->
  <nav
    class="nav-sidenav"
    [@mobileNav]
    [class.fullMode]="isFullMode() || isMobile()"
    [class.compactMode]="!isFullMode() && !isMobile()"
    [class.mobile]="isMobile()"
    [class.animate]="animateWidth()"
    [class.resizing]="isResizing()"
    [style.width.px]="sidenavWidth()"
    role="navigation"
    (keydown)="onNavKeyDown($event)"
  >
    <!-- Desktop Toggle Button (inside sidenav) -->
    @if (!isMobile()) {
      <button
        class="mode-toggle"
        [class.visible]="!isMobile()"
        (click)="toggleSideNavMode()"
        [attr.aria-label]="
          isFullMode() ? 'Switch to compact mode' : 'Switch to full mode'
        "
        [attr.aria-expanded]="isFullMode()"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path [attr.d]="isFullMode() ? 'M13 4l-6 6 6 6' : 'M7 4l6 6-6 6'" />
        </svg>
      </button>
    }

    <!-- Navigation Items -->
    <ul
      class="nav-list"
      role="list"
    >
      @for (item of config().items; track item.id) {
        @switch (item.type) {
          @case ('separator') {
            <hr
              class="nav-separator"
              [style.margin-top]="item.mtAuto && 'auto'"
            />
          }
          @case ('tree') {
            <li
              class="nav-item has-children"
              role="listitem"
            >
              <nav-list-tree
                [item]="item"
                [showLabels]="showText()"
                [isExpanded]="isGroupExpanded(item)"
                [activeWorkContextId]="activeWorkContextId()"
                (itemClick)="onItemClick($event)"
              ></nav-list-tree>
            </li>
          }
          @case ('menu') {
            <nav-mat-menu
              [item]="item"
              [showLabels]="showText()"
              (itemClick)="onItemClick($event)"
            ></nav-mat-menu>
          }
          @default {
            <li
              class="nav-item"
              role="listitem"
            >
              @switch (item.type) {
                @case ('workContext') {
                  <nav-item
                    [workContext]="item.workContext"
                    [type]="item.workContextType"
                    [defaultIcon]="item.defaultIcon"
                    [activeWorkContextId]="activeWorkContextId() || ''"
                    [variant]="'nav'"
                    [showLabels]="showText()"
                    [attr.data-project-id]="
                      item.workContextType === WorkContextType.PROJECT
                        ? item.workContext.id
                        : null
                    "
                    [attr.data-tag-id]="
                      item.workContextType === WorkContextType.TAG
                        ? item.workContext.id
                        : null
                    "
                    (clicked)="onItemClick(item)"
                  ></nav-item>
                }
                @case ('route') {
                  <nav-item
                    [container]="'route'"
                    [navRoute]="item.route"
                    [icon]="item.icon"
                    [svgIcon]="item.svgIcon"
                    [label]="item.label"
                    [showLabels]="showText()"
                    [tourClass]="item.tourClass"
                    (clicked)="onItemClick(item)"
                  ></nav-item>
                }
                @case ('href') {
                  <nav-item
                    [container]="'href'"
                    [navHref]="item.href"
                    [icon]="item.icon"
                    [svgIcon]="item.svgIcon"
                    [label]="item.label"
                    [showLabels]="showText()"
                    [tourClass]="item.tourClass"
                    (clicked)="onItemClick(item)"
                  ></nav-item>
                }
                @case ('action') {
                  <nav-item
                    [container]="'action'"
                    [icon]="item.icon"
                    [svgIcon]="item.svgIcon"
                    [label]="item.label"
                    [showLabels]="showText()"
                    [tourClass]="item.tourClass"
                    (clicked)="onItemClick(item)"
                  ></nav-item>
                }
                @case ('plugin') {
                  <nav-item
                    [container]="'action'"
                    [icon]="item.icon"
                    [svgIcon]="item.svgIcon"
                    [label]="item.label"
                    [showLabels]="showText()"
                    [tourClass]="item.tourClass"
                    (clicked)="onItemClick(item)"
                  ></nav-item>
                }
              }
            </li>
          }
        }
      }
    </ul>
  </nav>
}

<!-- Resize Handle (moved outside scrolling container) -->
@if (config().resizable && !isMobile()) {
  <div
    class="resize-handle position-left"
    [class.compactMode-handle]="!isFullMode()"
    (mousedown)="onResizeStart($event)"
    [attr.aria-label]="'Resize sidenav'"
    role="separator"
  ></div>
}
